<template>
	<div class="house-item-type9">
		<div class="item-inner">
			<!-- 封面 -->
			<div class="cover">
				<img :src="itemData.image.url" alt="" />
			</div>

			<div class="infos">
				<div class="summary">
					{{ itemData.summaryText }}
				</div>
				<div class="houseName">
					{{ itemData.houseName }}
				</div>
				<div class="price">
					<van-rate :model-value="itemScore" color="red" readonly size="15" allow-half />
					<div class="new">{{ "￥" + itemData.finalPrice }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { computed } from "vue"
	const props = defineProps({
		itemData: {
			type: Object,
			default: () => ({})
		}
	})

	const itemScore = computed(() => {
		return Number(props.itemData.commentScore)
	})

</script>

<style scoped lang="less">
	.house-item-type9 {
		width: 50%;
		.item-inner {
			position: relative;
			margin: 5px;
		}
		img {
			width: 100%;
			border-radius: 10px;
		}
		.infos {
			position: absolute;
			bottom: 0;
			left: 0;
			color: #fff;
			padding: 9px;
		}

		.houseName {
			margin: 5px 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 15px;

		}
		.summary{
			font-size: 15px;

		}
		.price {
			display: flex;
			justify-content: space-between;
		}
	}
</style>
